<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的工单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true"
             :model="tsWorkOrder"
             class="order-search">
      <el-form-item label="工单编号:">
        <el-input size="small"
                  v-model="tsWorkOrder.woNumber"
                  placeholder="请输入工单编号"></el-input>
      </el-form-item>

      <!-- 状态选择器 -->

      <el-form-item label="工单状态">
        <el-select v-model="tsWorkOrder.woStatus"
                   placeholder="请选择工单状态"
                   clearable
                   @clear="clearSearch()">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="提交时间:">
        <div class="block">
          <el-date-picker v-model="searchTime"
                          type="date"
                          placeholder="请选择提交时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button size="small"
                   type="primary"
                   icon="el-icon-search"
                   @click="search">搜索</el-button>
      </el-form-item>
    </el-form>

    <!--列表-->
    <el-table size="small"
              :data="orderList"
              highlight-current-row
              v-loading="loading"
              border
              element-loading-text="拼命加载中"
              style="width: 100%;">
      <el-table-column align="center"
                       type="selection"
                       width="60">
      </el-table-column>
      <el-table-column sortable
                       prop="woNumber"
                       label="工单编号"
                       width="200">
      </el-table-column>
      <el-table-column sortable
                       prop="woProTitle"
                       label="工单问题标题"
                       width="200">
      </el-table-column>
      <el-table-column sortable
                       prop="categoryName"
                       label="工单问题类型"
                       width="100">
      </el-table-column>
      <el-table-column sortable
                       prop="woSubmitTime"
                       label="工单提交时间"
                       width="100">
      </el-table-column>
      <el-table-column sortable
                       prop="statusName"
                       label="工单状态"
                       width="100">
      </el-table-column>
      <el-table-column align="center"
                       label="操作"
                       min-width="300">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="info"
                     @click="handlView(scope.$index, scope.row)">查看</el-button>
          <el-button size="mini"
                     type="primary"
                     v-if="scope.row.woStatus==0"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="warning"
                      v-if="scope.row.woStatus==0"
                     @click="handleCancle(scope.$index, scope.row)">取消</el-button>
          <el-button size="mini"
                     type="danger"
                      v-if="scope.row.woStatus==4||scope.row.woStatus==5"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini"
                     type="success"
                      v-if="scope.row.woStatus==4&&scope.row.woRemarkStatus==0"
                     @click="handleRemark(scope.$index, scope.row)">评价</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm"
                @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title"
               :visible.sync="editFormVisible"
               width="30%"
               @click="closeDialog">
      <el-form label-width="120px"
               :model="editForm"
               :rules="rules"
               ref="editForm">
        <el-form-item label="工单问题标题"
                      prop="woProTitle">
          <el-input size="small"
                    v-model="editForm.woProTitle"
                    auto-complete="off"
                    placeholder="请输入工单问题标题"></el-input>
        </el-form-item>

        <el-form-item label="工单问题详情"
                      prop="woProCont">
          <!-- <el-input size="small"
                    v-model="editForm.woProCont"
                    auto-complete="off"
                    placeholder="请输入工单问题详情"></el-input> -->
          <el-input type="textarea"
                    v-model="editForm.woProCont"
                    placeholder="请输入工单问题详情">

          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button size="small"
                   @click="closeDialog">取消</el-button>
        <el-button size="small"
                   type="primary"
                   :loading="loading"
                   class="title"
                   @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
    <!-- 评价表单 -->
    <el-dialog title="评价"
               :visible.sync="remarkFormVisible"
               width="30%"
               @click="closeDialog">
      <div>
        <!-- 评价打分 -->

        <el-rate v-model="remarkForm.wrLevel"
                 :texts="remarkText"
                 show-text>
        </el-rate>

        <br>
        <!-- 评价内容 -->
        <el-input type="textarea"
                  :rows="3"
                  placeholder="请输入你的评价"
                  v-model="remarkForm.wrArea">
        </el-input>
      </div>
      <div slot="footer">
        <el-button @click="cancelRemark()">取 消</el-button>
        <el-button type="primary"
                   @click="submitRemark()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      remarkFormVisible: false, //控制评价页面显示与隐藏
      title: '添加',
      editForm: {
        woProTitle: '',
        woProCont: '',
        updateById: 0,
        woId: 0,
      },
      remarkForm: {
        wrArea: '',
        wrLevel: 0,
        fromUid: 0,
        woId: 0, //
      },
      remarkText: ['非常不满意', '不满意', '一般', '满意', '非常满意'], //评价的登记
      // rules表单验证
      rules: {
        woProTitle: [
          { required: true, message: '请输入工单问题标题', trigger: 'blur' },
        ],
        woProCont: [
          { required: true, message: '请输入工单问题内容', trigger: 'blur' },
        ],
      },
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken'),
      },
      userparm: [], //搜索权限
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      // 工单类型选择
      options: [
        {
          value: '0',
          label: '未受理',
        },
        {
          value: '1',
          label: '已派单',
        },
        {
          value: '2',
          label: '待您反馈',
        },
        {
          value: '3',
          label: '处理中',
        },
        {
          value: '4',
          label: '工单已关闭',
        },
        {
          value: '5',
          label: '工单已取消',
        },
      ],
      value: '',

      //日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      value1: '',
      //搜索条件
      tsWorkOrder: {
        wo_number: '',
        woSubmitId: 4,
        woSubmitTime: '',
        woStatus: '',
      },
      searchTime: '',
      //取消订单
      cancelOrder: {
        updateById: '',
        woId: '',
      },
      //删除订单
      deleteOrder: {
        updateById: '',
        woId: '',
      },
      orderList: [],
    }
  },
  // 注册组件
  components: {
    Pagination,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取工单列表
    getdata() {
      // this.tsWorkOrder.woSubmitId=localStorage.getItem("userId");
      this.$axios
        .post(
          '/api/workOrder/user/list/' +
            this.formInline.page +
            '/' +
            this.formInline.limit,
          this.tsWorkOrder
        )
        .then((res) => {
          //分页对象
          let page = res.data.data
          this.orderList = res.data.data.list
          this.pageparm.total = page.total
          this.pageparm.currentPage = this.formInline.page
          this.pageparm.pageSize = this.formInline.limit
        })
        .catch()
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    //日期选择

    // 搜索事件
    search() {
      if ((this.searchTime != null) & (this.searchTime != '')) {
        //把时间转换为字符串
        this.tsWorkOrder.woSubmitTime = this.searchTime.toLocaleDateString()
      }
      this.tsWorkOrder.wo_number = this.formInline
      this.getdata()
    },
    //清空下拉框搜索条件
    clearSearch() {
      this.tsWorkOrder.woStatus = ''
    },
    handlView: function (index, row) {
      console.log(row);
      this.$router.push({
        name: '我的工单详情',
        params: { row: row },
      })
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.woProTitle = row.woProTitle
        this.editForm.woProCont = row.woProCont
        this.editForm.woId = row.woId
        // this.editForm.updateById=localStorage.getItem("userId")
        this.editForm.updateById = 4
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate((valid) => {
        if (valid) {
          this.$axios
            .post('/api/workOrder/user/editTheContent', this.editForm)
            .then((res) => {
              if (res.data.code == '500') {
                this.$message('更新失败')
              } else {
                this.$message('更新成功')
              }
              this.closeDialog()
              this.getdata()
            })
        } else {
          return false
        }
      })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    },
    //取消工单
    handleCancle: function (index, row) {
      this.$confirm('确定要取消吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //获取到操作人Id
          //  this.cancelOrder.updateById=localStorage.getItem("userId");
          this.cancelOrder.updateById = 4
          this.cancelOrder.woId = row.woId
          this.$axios
            .post('/api/workOrder/user/cancelOne', this.cancelOrder)
            .then((res) => {
              if (res.data.code == '500') {
                this.$message('取消失败')
              } else {
                this.$message('取消成功')
                this.getdata()
              }
            })
            .catch()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '操作取消',
          })
        })
    },
    // 删除工单
    handleDelete: function (index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //获取到操作人Id
          //  this.cancelOrder.updateById=localStorage.getItem("userId");
          this.deleteOrder.updateById = 4
          this.deleteOrder.woId = row.woId
          this.$axios
            .post('/api/workOrder/user/deleteOne', this.deleteOrder)
            .then((res) => {
              if (res.data.code == '500') {
                this.$message('删除失败')
              } else {
                this.$message('删除成功')
                this.getdata()
              }
            })
            .catch()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '操作取消',
          })
        })
    },
    handleRemark: function (index, row) {
      this.remarkFormVisible = true
      this.remarkForm.woId = row.woId
      // this.remarkForm.fromUid=localStorage.getItem("userId");
      this.remarkForm.fromUid = 4
    },
    //确认提交评价
    submitRemark() {
      if(this.remarkForm.wrLevel === 0){
        this.$message({
                    message: "请选择评分",
                    type: 'warning',
                });
                return;
      }
      //提交评价
      this.$axios.post("/api/workOrder/user/remark",this.remarkForm).then((res)=>{
        if(res.data.code==500){
            this.$message({
                    message: "评论失败",
                    type: 'warning',
                });
          this.cancelRemark()
        }else{
           this.$message({
                    message: "评论成功",
                    type: 'success',
                });
           this.cancelRemark()
           this.getdata();
        }
      })
    },
    cancelRemark() {
      this.remarkForm.wrArea = ''
      this.remarkForm.wrLevel = 0
      this.remarkFormVisible = false
    },
    closeRemarkDialog() {
      this.remarkForm.wrArea = ''
      this.remarkForm.wrLevel = 0
      this.remarkFormVisible = false
    },
  },
}
</script>

<style scoped>
.order-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 